<template>
	<div class="statement">
		<div class="header">
			<div class="header_d">
				<div>
					<span class="name">{{list.nickName}}</span>
					<span class="ren">团队人数：{{list.teamCount}}</span>
				</div>
				<!--<div class="cha">查看详情</div>-->
			</div>
			<div class="header_dd">
				<!--<div>
					<span class="header_dd_u">销售总额(元)</span>
					<span class="header_dd_uu">{{list.orderCount}}</span>
				</div>-->
				<div>
					<span class="header_dd_u">预估收益(元)</span>
					<span class="header_dd_uu">{{list.preProfit}}</span>
				</div>
				<div>
					<span class="header_dd_u">累计收益(元)</span>
					<span class="header_dd_uu">{{list.actualProfit}}</span>
				</div>
			</div>
		</div>
		
		<div class="classify"> 
			<div class="classify_d" id="classify_d">
				<div @click="sky"  class="on">今天</div>
				<div @click="week">本周</div>
				<div @click="month">本月</div>
			</div>
			<div class="classify_dd">
				<div class="yin">
					<div>
						<span>{{data.totalMoney}}</span>
					<span>预估收益（元）</span>
					</div>
					<!--<div>
						<span>{{data.orderCount}}</span>
						<span>订单数量（单）</span>
					</div>-->
				</div>
			</div>
		</div>
		
		<div id="main" style="width: 100%;height:400px;"></div>
		
	</div>
</template>

<script>

	window.onload=function(){
		var lists = document.getElementById("classify_d")
		for(var i=0;i<lists.children.length;i++){
		        lists.children[i].onclick=function () {
		            for(var j=0;j<lists.children.length;j++){
		                lists.children[j].classList.remove("on");//清除所有reds样式
		            }
		            this.classList.add("on");
		        }
	    	}
	}

import { BaseUrl } from '../Baseurl/common.js'
	export default{
		data(){
			return{
				list:[],
				userId:'',
				skyy:[],
				weekk:[],
				monthh:[],
				data:[]
			}
		},
		created(){
			var href = window.location.href;
//			console.log(href)
			this.userId=href.split('?')[1]
			var Url = BaseUrl + "/users/personal/perform/head" + "?"+this.userId;
			this.$http.get(Url).then(res => {
				if(res.data.code == "10000"){
			   	this.list = res.data.data;
//			   	console.log(this.list)
			   }
			},response => {
            	console.log("error");
        	})
			

			
				var href = window.location.href;
				this.userId=href.split('?')[1]
				var Url = BaseUrl + "/users/personal/perform/today" + "?"+this.userId;
				var x=[]
				var y=[]
				this.$http.get(Url).then(res => {
				if(res.data.code == "10000"){
				this.data = res.data.data
//				console.log(this.data)
			   	this.skyy = res.data.data.list;
			   	for (let i = 0;i < this.skyy.length;i++){
				 x.push(this.skyy[i].TIME);
				 y.push(this.skyy[i].AMOUNT);
				}
				var echarts = require('echarts');
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
			    xAxis: {
			        name : '时',
			        type: 'category',
			        data: x
			    },
			    yAxis: {
			    	name : '金额（元）',
			        type: 'value'
			    },
			    series: [{
			        data: y,
			        type: 'line'
			    }]
				};
	
				myChart.setOption(option);
			   }
				},response => {
	            	console.log("error");
	        	})
				
				
				
		},
		methods:{
			sky:function(){
				var href = window.location.href;
				this.userId=href.split('?')[1]
				var Url = BaseUrl + "/users/personal/perform/today" + "?"+this.userId;
				var x=[]
				var y=[]
				this.$http.get(Url).then(res => {
				if(res.data.code == "10000"){
				this.data = res.data.data
//				console.log(this.data)
			   	this.skyy = res.data.data.list;
//			   	console.log(this.skyy)
			   	for (let i = 0;i < this.skyy.length;i++){
				 x.push(this.skyy[i].TIME);
				 y.push(this.skyy[i].AMOUNT);
				}
				var echarts = require('echarts');
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
			    xAxis: {
			    	name : '时',
			        type: 'category',
			        data: x
			    },
			    yAxis: {
			    	name : '金额（元）',
			        type: 'value'
			    },
			    series: [{
			        data: y,
			        type: 'line'
			    }]
				};
	
				myChart.setOption(option);
			   }
				},response => {
	            	console.log("error");
	        	})
			},
			week:function(){
				var href = window.location.href;
				this.userId=href.split('?')[1]
				var Url = BaseUrl + "/users/personal/perform/week" + "?"+this.userId;
				var x=[]
				var y=[]
				this.$http.get(Url).then(res => {
				if(res.data.code == "10000"){
				this.data = res.data.data
//				console.log(this.data)	
			   	this.weekk = res.data.data.list;
			   	for (let i = 0;i < this.weekk.length;i++){
				 x.push(this.weekk[i].TIME);
				 y.push(this.weekk[i].AMOUNT);
				}
				var echarts = require('echarts');
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
			    xAxis: {
			    	name : '天',
			        type: 'category',
			        data: x
			    },
			    yAxis: {
			    	name : '金额（元）',
			        type: 'value'
			    },
			    series: [{
			        data: y,
			        type: 'line'
			    }]
				};
	
				myChart.setOption(option);
			   }
				
				},response => {
	            	console.log("error");
	        	})
			},
			month:function(){
				var href = window.location.href;
				this.userId=href.split('?')[1]
				var Url = BaseUrl + "/users/personal/perform/month" + "?"+this.userId;
				var x=[]
				var y=[]
				this.$http.get(Url).then(res => {
				if(res.data.code == "10000"){
				this.data = res.data.data
//				console.log(this.data)
			   	this.monthh= res.data.data.list;
			   	for (let i = 0;i < this.monthh.length;i++){
				 x.push(this.monthh[i].TIME);
				 y.push(this.monthh[i].AMOUNT);
				}
				var echarts = require('echarts');
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
			    xAxis: {
			    	name : '月',
			        type: 'category',
			        data: x
			    },
			    yAxis: {
			    	name : '金额（元）',
			        type: 'value'
			    },
			    series: [{
			        data: y,
			        type: 'line'
			    }]
				};
	
				myChart.setOption(option);
			   }
				},response => {
	            	console.log("error");
	        	})
			}
			
			
	}
}
</script>

<style scoped="scoped">
	html,body,.statement{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}
	.header{
		width: 100%;
		height: 3.5rem;
		background:#FF2040 ;
		padding: 0.2rem 0.3rem;
	}
	.header_d{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.17rem;
		margin-top: 0.5rem;
		padding-left: 0.3rem;
	}
	.name{
		display: block;
		font-size: 0.3rem;
		color: #FFFFFF;
	}
	.ren{
		display: block;
		font-size: 0.14rem;
		color: #FFA2AD;
	}
	.cha{
		font-size: 0.14rem;
		color: #FFFFFF;
	}
	.header_dd{
		width: 100%;
		display: flex;
		justify-content:space-around;
		margin-top: 0.8rem;
	}
	.header_dd div{
		width: 3rem;
		/*width: 2rem;*/
		border-right:1px solid #FF6178;
		padding: 0 0.3rem;
	}
	.header_dd div:last-child{
		border: none;
	}
	.header_dd span{
		display: block;
	}
	.header_dd_u{
		color: #FFA2AD;
		font-size: 0.12rem;
	}
	.header_dd_uu{
		color: #ffffff;
		font-weight: bold;
		font-size: 0.14rem;
	}
	
	.classify{
		width: 100%;
		padding: 0.3rem 0.4rem 0 0.4rem;
		border-bottom: 1px solid #F6F6F6;
	}
	.classify_d{
		width: 100%;
		overflow: hidden;
	}
	.classify_d div{
		width: 33%;
		height: 0.5rem;
		line-height: 0.5rem;
		float: left;
		border: 0.5px solid #FF2040;
		text-align: center;
		font-size: 0.15rem;
	}
	.on{
		background: #FF2040;
		color: #FFFFFF;
	}
	.classify_dd{
		width: 100%;
		padding:0.2rem 0;
		overflow: hidden;
	}
	.classify_dd .yin div{
		width: 100%;
		text-align: center;
		float: left;
		border-right: 1px solid #EFEFEF;
	}
	.classify_dd div:last-child{
		border: none;
	}
	.classify_dd div span:first-child{
		display: block;
		font-size: 0.6rem;
		color: #FF2040;
		font-weight: normal!important;
	}
	.classify_dd div span:last-child{
		display: block;
		font-size: 0.12rem;
	}
</style>